<template>
  <div class="container mx-auto flex flex-col items-start md:flex-row my-24">
    <div class="flex flex-col w-full md:(top-24 sticky w-1/3 order-1)">
      <div class="mx-2 shadow-lg rounded-lg overflow-hidden">
        <img
          class="w-full max-h-64 object-cover object-center"
          src="/AgricultureHeart.jpg"
          alt="background"
        />
        <div class="my-4 px-4 text-gray-500">
          <div class="flex flex-wrap items-center justify-between">
            <div
              class="w-26 h-26 -mt-14 md:(w-40 h-40 -mt-20) bg-white border-white border-4 shadow-md rounded-full overflow-hidden"
            >
              <img
                class="w-full h-full object-cover"
                :src="userStore.avatar"
                alt="avatar"
              />
            </div>
            <div class="flex flex-wrap items-center justify-center flex-grow">
              <h2 class="font-bold text-2xl truncate mx-4">
                {{ userStore.user?.nickname }}
              </h2>
              <ZButton @click="router.push('/todos/new')" outline>
                <svg
                  class="w-6 h-6 mr-2"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"
                  ></path>
                </svg>
                新待办
              </ZButton>
            </div>
          </div>

          <div class="flex justify-around pt-2 px-4">
            <div class="text-center">
              <span
                class="text-xl font-bold block uppercase tracking-wide text-blue-500"
              >
                {{ todosStore.stat.count }}
              </span>
              <span class="text-sm text-gray-600">总条目</span>
            </div>
            <div class="text-center">
              <span
                class="text-xl font-bold block uppercase tracking-wide text-red-500"
              >
                {{ todosStore.notFinishCount }}
              </span>
              <span class="text-sm text-gray-600">未完成</span>
            </div>
            <div class="text-center">
              <span
                class="text-xl font-bold block uppercase tracking-wide text-emerald-500"
              >
                {{ todosStore.finishCount }}
              </span>
              <span class="text-sm text-gray-600">已完成</span>
            </div>
          </div>
          <hr class="my-4" />
          <div class="relative">
            <Chart
              ref="chartRef"
              class="h-full max-h-64 rounded-xl bg-base shadow-md"
            />
            <ZButton
              class="absolute bottom-2 right-2 rounded-full"
              @click="downChart"
            >
              <SvgIcon class="h-6 w-6 m-2" name="Camera" />
            </ZButton>
          </div>
        </div>
      </div>
    </div>
    <div class="w-full my-4 md:(ml-2 mt-0 w-2/3)">
      <RouterView v-slot="{ Component }">
        <Transition
          appear
          enter-active-class="transition duration-1000 ease-in"
          enter-from-class="opacity-0"
          enter-to-class="opacity-100"
        >
          <KeepAlive>
            <component :is="Component" />
          </KeepAlive>
        </Transition>
      </RouterView>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { useUserStore } from "@/stores/user";
import { useTodosStore } from "@/stores/todos";
import { useEventListener } from "@vueuse/core";
import { useRouter } from "vue-router";
import Chart from "@/components/Chart.vue";
import { onScrollToBottom } from "@/pkg/hooks/onScrollToBottom";
import { ref } from "vue";

import { dataURLtoBlob, download } from "@/pkg/utils";

const userStore = useUserStore(),
  todosStore = useTodosStore(),
  chartRef = ref<typeof Chart>();
// scroll load
onScrollToBottom(() => todosStore.load(), "onActivated");
// on keyup event
useEventListener(document, "keyup", (e) => {
  // console.log(e);
});

const router = useRouter();

const downChart = () => {
  download(dataURLtoBlob(chartRef.value?.toBase64Image()), "todos.png");
};
</script>
<style></style>
